import { useEffect, useRef, useState } from 'react';
import s from './index.module.scss';

const PullDown = ({
  children, 
  refresh,
  focusRef,
  pullHeight,
  loadingPic,
}) => {
  const containerRef = useRef(null);

  const [touchY, setTouchY] = useState(0);
  const [percentage, setPercentage] = useState(0);
  const [containerData, setContainerData] = useState({});
  const [focusData, setFocusData] = useState({})
  const [isFocusRefInTop, setIsFocusRefInTop] = useState(false)

  useEffect(() => {
    const cData = containerRef.current.getBoundingClientRect();
    cData && setContainerData(cData);
    const fData = focusRef.current.getBoundingClientRect();
    fData && setFocusData(fData);
    console.log('cData', cData, fData)
  }, [])


  useEffect(() => {
    containerRef?.current.addEventListener('touchstart', start, {
      passive: true,
    });
    containerRef?.current.addEventListener('touchmove', move, { passive: true });
    containerRef?.current.addEventListener('touchend', end, { passive: true });

    return () => {
      containerRef?.current.removeEventListener('touchstart', start, {
        passive: true,
      });
      containerRef?.current.removeEventListener('touchmove', move, { passive: true });
      containerRef?.current.removeEventListener('touchend', end, { passive: true });
    }
  }, [touchY, percentage, isFocusRefInTop])

  const start = (e) => {
    const touch = e.touches[0];
    setTouchY(touch.clientY);

    const focusTop = focusRef.current.getBoundingClientRect().top;
    if(focusTop === focusData.top) {
      setIsFocusRefInTop(true);
    }
  };

  const move = (e) => {
    const touch = e.touches[0];
    let offset = touch.clientY - touchY;
    const focusTop = focusRef.current.getBoundingClientRect().top;
    if(focusTop === focusData.top) {
      setIsFocusRefInTop(true);
      setTouchY(touch.clientY);
    }
    
    if (offset >= 0 && isFocusRefInTop) {
      setPercentage(offset / containerData.height)
      changeFocusRefY(offset > pullHeight ? pullHeight: offset);
      console.log(`offset: ${offset}-----percent: ${percentage}--------focusTop: ${top}`)
    }
  };

  const end = (e) => {
    if(percentage > 0.03){
      focusRef.current.parentNode.insertBefore(createLoadingDom(), focusRef.current);

      setTimeout(() => {
        document.getElementById('d-loading').remove();
        refresh();
      }, 2000);
    }
    changeFocusRefY(0)
    setTouchY(0);
    setPercentage(0);
    setIsFocusRefInTop(false);
  };

  const changeFocusRefY = (offset) => {
    focusRef.current.style.transform = `translateY(${offset}px)`;
  }

  const createLoadingDom = () => {
    const loadingDom = document.createElement('div');
    loadingDom.id = 'd-loading';
    loadingDom.className = s.loading;
    loadingDom.style.height = pullHeight + 'px';

    if(loadingPic){
      loadingDom.style.backgroundImage = `url(${loadingPic})`;
      background-repeat
      
    }


    return loadingDom;
  }
  

  return (
    <div ref={containerRef} className={s.container}>
      <div className={s.main}>{children}</div>
    </div>
  )
}

export default PullDown;